<template>
  <section class="article wrapper">
    <div class="article-header" :z-index="100">
      <router-link to="/home/article/recommend">推荐</router-link>
      <router-link to="/home/article/latest">最新</router-link>
    </div>
    <router-view></router-view>
  </section>
</template>

<script>
export default {
  name: "ArticlePage",
  data() {
    return {
      articles: [],
    };
  },
  //页面失活
  deactivated() {
    console.log("页面失活");
  },
  //页面激活
  activated() {
    console.log("页面激活");
  },
};
</script>

<style lang="less" scoped>
.article {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: (10/3.75vw) (10/3.75vw) (71/3.75vw);
  .article-header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: (40/3.75vw);
    background-color: #fff;
    a {
      display: block;
      width: (60/3.75vw);
      font-size: (18/3.75vw);
      text-align: center;
      line-height: (40/3.75vw);
    }
  }
  .active {
    color: #2009ec;
  }
}
</style>
